import { checkUserExists, resetUserPassWord2 } from "@/api/modules/user";
import SIdentify from "@/components/SIdentify";
import { usePhoneCode } from "@/hooks/getPhoneCode";
import { showTips } from "@/utils/util";
import { ElForm, ElInput } from "element-plus";
import { defineComponent } from "vue";
import "../index.scss";
import { showMsg } from "./../../../utils/util";
export default defineComponent({
	emits: ["submit"],
	setup(props, { emit }) {
		enum stepEnum {
			step1 = "step1",
			step2 = "step2"
		}
		type FormInstance = InstanceType<typeof ElForm>;
		const currStep = ref<stepEnum>(stepEnum.step1);
		const sidentifyEl = ref();
		const form1_El = ref<FormInstance>();
		const form2_El = ref<FormInstance>();
		const step1 = reactive({
			flag: false,
			stepForm: {
				username: "",
				sidentifyCode: "",
				code: ""
			},
			stepFormRule: {
				username: [{ required: true, message: "帐号名不能为空", trigger: "change" }],
				code: [{ required: true, message: "验证码不能为空", trigger: "change" }]
			}
		});
		const step2 = reactive({
			flag: false,
			stepForm: {
				username: "",
				code: "",
				mobile: "",
				password: "",
				confirmPassword: ""
			},
			stepFormRule: {
				mobile: [{ required: true, message: "手机号不能为空", trigger: "change" }],
				code: [{ required: true, message: "验证码不能为空", trigger: "change" }],
				password: [{ required: true, message: "请输入新密码", trigger: "change" }],
				confirmPassword: [{ required: true, message: "请确认新密码", trigger: "change" }]
			}
		});
		setTimeout(() => {
			sidentifyEl.value.drawPic();
		}, 300);
		type FormInputInstance = InstanceType<typeof ElInput>;
		const codeInputEl = ref<FormInputInstance>();
		let { getCode, codeStatus } = usePhoneCode(step2.stepForm);

		const geePhoneCode = () => {
			getCode(step2.stepForm.mobile);
			codeInputEl.value?.focus();
		};
		const keyudown = (e: any) => {
			e = window.event || e;
			if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
				gotoNext();
			}
		};
		const gotoNext = async (step?: stepEnum) => {
			step = step || currStep.value;
			let valid = false;
			switch (step) {
				case stepEnum.step1:
					valid = await (form1_El.value as FormInstance).validate();
					if (!valid) {
						return;
					}
					if (step1.stepForm.sidentifyCode != step1.stepForm.code) {
						showMsg("图形验证码输入错误", false);
						return;
					}
					let res = await checkUserExists({ username: step1.stepForm.username });
					let result = res?.result;
					if (!result?.username) {
						showMsg("用户账号不存在", false);
						return;
					}
					step1.flag = true;
					currStep.value = stepEnum.step2;
					nextTick(() => {
						step2.stepForm = {
							username: result?.username || "",
							mobile: result?.mobile || "",
							code: "",
							password: "",
							confirmPassword: ""
						};
						(form2_El.value as FormInstance).resetFields();
					});

					break;
				case stepEnum.step2:
					valid = await (form2_El.value as FormInstance).validate();
					if (!valid) {
						return;
					}
					if (step2.stepForm.password != step2.stepForm.confirmPassword) {
						showMsg("两次密码输入不一致", false);
						return;
					}
					submit();
					break;
			}
		};
		const submit = async () => {
			let { code, message } = await resetUserPassWord2({
				username: step1.stepForm.username,
				password: step2.stepForm.password,
				mobile: step2.stepForm.mobile,
				code: step2.stepForm.code
			});
			let ok = showTips(code, "重置密码", message);
			if (ok) {
				emit("submit", { username: step1.stepForm.username, password: step2.stepForm.password });
			}
		};
		return () => {
			return (
				<div class="reset-password">
					<div class="steps flex p-8">
						<div class="border"></div>
						<div
							class={[
								"step-1 step-item flex item.scss-center",
								step1.flag ? "ok" : "",
								currStep.value == stepEnum.step1 ? "active" : ""
							]}
						>
							<div class="number">1</div>
							<div class="text">验证身份</div>
						</div>
						<div
							class={[
								"step-1 step-item flex item.scss-center",
								step2.flag ? "ok" : "",
								currStep.value == stepEnum.step2 ? "active" : ""
							]}
						>
							<div class="empty-fill"></div>
							<div class="number" style="margin-left:0">
								2
							</div>
							<div class="text">重置密码</div>
						</div>
					</div>
					<div class="step-form pr-10">
						{/* 第一步 */}
						{currStep.value == stepEnum.step1 ? (
							<div class="step-content">
								<el-form
									label-width="100px"
									model={step1.stepForm}
									ref={form1_El}
									rules={step1.stepFormRule}
									size="large"
									onKeydown={keyudown}
								>
									<el-form-item label="帐号名" prop="username">
										<el-input v-model={step1.stepForm.username} placeholder="请输入您的账户名" />
									</el-form-item>
									<el-form-item label="验证码" prop="code">
										<div class="flex w-full">
											<el-input
												v-model={step1.stepForm.code}
												placeholder="请输入图片验证码"
												class="flex-1"
												style="height:38px"
											></el-input>
											<SIdentify
												ref={sidentifyEl}
												v-model:identifyCode={step1.stepForm.sidentifyCode}
												contentHeight={38}
												contentWidth={150}
											/>
										</div>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" onClick={() => gotoNext()}>
											下一步
										</el-button>
									</el-form-item>
								</el-form>
							</div>
						) : null}

						{/* 第二步 */}
						{currStep.value == stepEnum.step2 ? (
							<div class="step-content">
								<el-form
									label-width="120px"
									model={step2.stepForm}
									ref={form2_El}
									rules={step2.stepFormRule}
									size="large"
									onKeydown={keyudown}
								>
									{!step2.stepForm.mobile ? (
										<div class="text-base font-bold text-center text-red-500 pt-10" style="height:213px;">
											您的帐号当前没有验证方式，请联系管理员重置密码
										</div>
									) : (
										<>
											<el-form-item label="您的手机号码" prop="mobile">
												<el-input v-model={step2.stepForm.mobile} placeholder="您的手机号码" disabled />
											</el-form-item>
											<el-form-item label="短信验证码" prop="code">
												<el-input
													autocomplete="new-password"
													v-model={step2.stepForm.code}
													placeholder="请输入短信验证码"
													rer={codeInputEl}
												>
													{{
														append: () => {
															return (
																<el-button type="info" loading={codeStatus.countDown > 0} onClick={geePhoneCode}>
																	{codeStatus.countDown > 0 ? (
																		<span class="text-black">
																			<span class="text-red-600">{codeStatus.countDown}</span>秒后重试
																		</span>
																	) : (
																		<span>获取验证码</span>
																	)}
																</el-button>
															);
														}
													}}
												</el-input>
											</el-form-item>
											<el-form-item label="新密码" prop="password">
												<el-input
													autocomplete="new-password"
													v-model={step2.stepForm.password}
													placeholder="请输入新密码"
													type="password"
													show-password
												/>
											</el-form-item>
											<el-form-item label="确认新密码" prop="confirmPassword">
												<el-input
													autocomplete="new-password"
													v-model={step2.stepForm.confirmPassword}
													placeholder="请再次输入新密码"
													type="password"
													show-password
												/>
											</el-form-item>
											<el-form-item>
												<el-button type="primary" onClick={() => gotoNext()}>
													提交
												</el-button>
											</el-form-item>
										</>
									)}
								</el-form>
							</div>
						) : null}
					</div>
				</div>
			);
		};
	}
});
